"use client";
import React, { useState, useEffect } from "react";
import { Button, Input, Select, DatePicker } from "antd";
import TABLE from "../../system/Content/page";
import "./page.css";
import {
  SearchOutlined,
  UndoOutlined,
  BorderlessTableOutlined,
  DownloadOutlined,
  ToTopOutlined,
  NodeExpandOutlined,
  ExportOutlined,
  FolderOpenOutlined,
  FormatPainterOutlined,
  InsertRowAboveOutlined,
} from "@ant-design/icons";
const columns = [
  {
    title: "商机标题",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "关联客户",
    dataIndex: "user",
    key: "user",
    width: "160px",
  },
  {
    title: "商机阶段",
    dataIndex: "sjjd",
    key: "sjjd",
  },
  {
    title: "报价记录",
    dataIndex: "bjjl",
    key: "bjjl",
  },
  {
    title: "报价总金额",
    dataIndex: "bjzje",
    key: "bjzje",
  },
  {
    title: "最后跟进",
    dataIndex: "zhgj",
    key: "zhgj",
  },
  {
    title: "未跟进天数",
    dataIndex: "wgjts",
    key: "wgjts",
  },
  {
    title: "操作",
    key: "action",
    render: (_: any, content: any) => {
      return (
        <div style={{ display: "flex" }}>
          <Button type="link" primary>
            {" "}
            跟进
          </Button>
          <Button type="link" primary>
            {" "}
            编辑
          </Button>
          <Button type="link" primary>
            {" "}
            置顶
          </Button>
          <Button type="link" primary>
            {" "}
            删除
          </Button>
        </div>
      );
    },
  },
];

export const data = [
  {
    key: "1",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "2",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "3",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "4",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "5",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "6",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "7",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "8",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "9",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "10",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "11",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
  {
    key: "12",
    title: "商机标题",
    user: "深圳市亿恩科技游戏那公司",
    sjjd: "初步洽谈",
    bjjl: "10条",
    bjzje: "￥10,000,00",
    zhgj: "2018-08-25",
    wgjts: "30",
  },
];

export const current = {
  defaultPageSize: 5,
  pageSizeOptions: [5, 10, 15, 20],
  showSizeChanger: true,
  total: data.length,
};
function page() {
  //tab切换数据
  const [tabs, settabs] = useState([
    {
      name: "全部商机",
      id: "0",
    },
    {
      name: "我的商机",
      id: "1",
    },
    {
      name: "下属商机",
      id: "2",
    },
    {
      name: "我协作的",
      id: "3",
    },
    {
      name: "下属写作",
      id: "4",
    },
    {
      name: "成交商机",
      id: "5",
    },
  ]);
  //切换标识
  const [tabIndex, settabIndex] = useState(0);
  //点击切换
  const tabsClick = (id: any) => {
    settabIndex(id);
  };
  //下拉选择
  const handleChange = (value: any) => {};
  //事件选择框
  const onChange = (date: any, dateString: any) => {
    console.log(date, dateString);
  };

  //复选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };


  return (
    <div style={{ width: "90%", margin: " 0 auto" }}>
      {/* 全部商机 */}
      <div className="all">
        <div className="all-top">
          {tabs.map((item, index) => {
            return (
              <p
                key={item.id}
                onClick={() => tabsClick(item.id)}
                className={tabIndex == index ? "active" : ""}
              >
                {item.name}
              </p>
            );
          })}
        </div>
        <div className="all-footer">
          <p>
            <Input
              placeholder="搜索关键词"
              style={{ width: "200px", height: "40px" }}
            />
          </p>
          <p>
            <Select
              defaultValue="lucy"
              style={{ width: "200px", height: "40px" }}
              onChange={handleChange}
              options={[
                { value: "jack", label: "Jack" },
                { value: "lucy", label: "Lucy" },
                { value: "Yiminghe", label: "yiminghe" },
                { value: "disabled", label: "Disabled", disabled: true },
              ]}
            />
          </p>
          <p>
            <Select
              defaultValue="lucy"
              style={{ width: "200px", height: "40px" }}
              onChange={handleChange}
              options={[
                { value: "jack", label: "Jack" },
                { value: "lucy", label: "Lucy" },
                { value: "Yiminghe", label: "yiminghe" },
                { value: "disabled", label: "Disabled", disabled: true },
              ]}
            />
          </p>
          <p>
            <Select
              defaultValue="lucy"
              style={{ width: "200px", height: "40px" }}
              onChange={handleChange}
              options={[
                { value: "jack", label: "Jack" },
                { value: "lucy", label: "Lucy" },
                { value: "Yiminghe", label: "yiminghe" },
                { value: "disabled", label: "Disabled", disabled: true },
              ]}
            />
          </p>
          <p>
            <DatePicker
              onChange={onChange}
              style={{ width: "200px", height: "40px" }}
            />
          </p>
          <p>
            <Button type="primary" icon={<SearchOutlined />}>
              查询
            </Button>
          </p>
          <p>
            <Button icon={<UndoOutlined />}>重置</Button>
          </p>
          <p>
            <Button>高级搜索</Button>
          </p>
        </div>
      </div>
      {/* 表格 */}
      <div className="all-table">
        {/* 添加那些按钮 */}
        <div className="all-table-top">
          <div className="all-table-top-left">
            <p>
              <Button type="primary" icon={<BorderlessTableOutlined />}>
                添加
              </Button>
            </p>
            <p>
              <Button icon={<DownloadOutlined />}>导入</Button>
            </p>
            <p>
              <Button icon={<ToTopOutlined />}>导出</Button>
            </p>
            <p>
              <Button icon={<NodeExpandOutlined />}>转移商机</Button>
            </p>
            <p>
              <Button icon={<ExportOutlined />}>添加协作</Button>
            </p>
            <p>
              <Button icon={<FolderOpenOutlined />}>发送短信</Button>
            </p>
          </div>
          <div className="all-table-top-right">
            <p>
              <Button>跟进模式</Button>
            </p>
            <p>
              <Button icon={<FormatPainterOutlined />}>排序</Button>
            </p>
            <p>
              <Button icon={<InsertRowAboveOutlined />}>列表</Button>
            </p>
          </div>
        </div>
        {/* 表格部分 */}
        <div className="all-table-footer">
          <TABLE data={data} columns={columns} current={current} rowSelection={rowSelection}></TABLE>
        </div>
      </div>
    </div>
  );
}

export default page;
